<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <%
        String path = request.getRequestURI();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path;
    %> 
    <base href="<%=basePath%>"> 
<title>志愿者招募用户--志愿招募</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/VolunteerCss/head.css">
<style type="text/css">
		#div1{
			/* width: 1050px; */
			height: 53px; 
			background-color: #c2b6df;
			margin: 0 auto;
			/* border: 20px solid #e9eced; */
		}
		h3{
			text-align: center;
			/* font-size: 20px */
		}
		.p1{text-indent: 2em;font-size: 30px;}
		.p2{text-align:left;color:#d34949;}
        p.thicker {font-weight:900;font-size: 30px;}
        p.stronger {font-weight:900;font-size: 20px;}

		#div3{text-align: center;font-size: 20px}
        #div4{text-align:center;}		
	</style>
</head>
<body>
				<article>
				  <header>
                    <article>
                        <header><div class="header_con">
                          <div class="header">
                              <div class="welcome">欢迎来到志愿者招募平台!</div>
                              <div class="user_login">
                                  <a href="../Login&Register.jsp">退出</a>
                                  <!-- <span>|</span>
                                  <a href="FoodRegister.html">注册</a> -->
                              </div>
                          </div>
                      </div><br>

                        <img alt="Brand" src="../img/志愿者图标.png"  width="50px" height="50px" style="float:left"><br>
                         <p class="thicker">"最美"抗疫志愿者招募平台</p1>  
                        </header>
               </article>
               <div class="navbar_con">
                <div class="navbar clearfix">
                    <ul class="navlist fl">
                        <li><a href="${pageContext.request.contextPath}/PersonalServlet">个人中心</a></li>
                        <li><a href="${pageContext.request.contextPath}/ForumServlet">志愿论坛</a></li>
                        <li><a href="${pageContext.request.contextPath}/ElegantServlet">志愿风采</a></li>
                        <div class="subnav_con fl">
                            <a href="${pageContext.request.contextPath}/RecruitServlet"><h1>志愿者招募<i></i></h1></a>
                        </div>
                        <li><a href="${pageContext.request.contextPath}/HomeServlet">首页</a></li>
                        
                    </ul>
                </div>
            </div><br><br>

       
       <div class="row">
        <C:forEach items="${recruit}" var="recruit">
          <div id="div4">
            <a href="${pageContext.request.contextPath}/RecruitDetailServlet?id=${recruit.id}">
            <div class="col-sm-4 col-md-3">
              <div class="thumbnail" width="200px" height="200px">
                <img src="../img/${recruit.pic}" alt="志愿者招募" class="img-responsive" >
                <p><a href="${pageContext.request.contextPath}/RecruitDetailServlet?id=${recruit.id}" class="btn btn-success" role="button">进行中</a></p>
                <div class="caption">
                  <p class="stronger">${recruit.title}</p><br>
                  <p>目标：${recruit.target}  |  已报名：${recruit.person} </p><br>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: ${recruit.progress}%;">
                      ${recruit.progress}%
                    </div>
                    <p>项目进度</p>
                  </div>
                  <p class="p2">距离招募结束：${recruit.days}天 </p><br>
                  <!-- <p><a href="RecruitDetail.html" class="btn btn-default" role="button">查看详情</a></p> -->
                </div>
               </div>
              </div>             
            </a>
            </div>
       </C:forEach>
     </div>    
</body>
</html>